﻿<!DOCTYPE html>
<html>
<head>
<title>窗口测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="../base/javascript/ext-core-min.js"></script>

<!-- 以下为自定义组件-->
<script type="text/javascript" src="javascript/windowlite.js"></script>
<script type="text/javascript" src="javascript/MessageBoxLite.js"></script>

<!--以下为css -->
<!-- 核心css，必须-->
<link rel="stylesheet" type="text/css" href="../base/css/core.css" />
<!-- 自定义组件的css-->
<link rel="stylesheet" type="text/css" href="css/aol/windowlite.css" id="skinCss" />

<style type="text/css">
	a.tool-help {
      background-position:0 -300px;
  }
  
  a.tool-help:hover {
      background-position:-15px -300px;
  }
</style>

<script type="text/javascript">
//<![CDATA[

Ext.onReady(function() {
			function newWin(){
    	
		    	var table="";//"<table>";
		    	tbody="";//"<tbody>";
		    	
		    	for(var row=0;row<1000;row++) {
		    		var tr="";//"<tr>";
		    		for(var col=0;col<10;col++) {
		    			var td="";//"<td>";
		    			td+=row+"_"+col;//+"</td>";
		    			tr+=td;
		    		}
		    		tbody+=tr+"<br/>";//+"</tr>";
		    	}
		    	
		    	table+=tbody;//+"</tbody>"+"</table>";
    	
    	
    			var mwindow = new Ext.ux.WindowLite({			
			
				        width:2500,
				        //height:1300,  
				        //每次都删掉    
				       	closeAction:'close',
				        drag:true,
				        title:'关掉就remove掉了',
				        shadow:'frame',
				        containerId:"relativeDiv",
				        shadowOffset:6,
				        maximizable:true,       
				        //items:[table],
				        tools:[{
				        	cls:'x-tool tool-help',
				        	'click':function(evt){
				        		alert("help");
				        		evt.stopEvent();
				        	}
				        }],
				        buttons:[{
				        	text:'close',
				        	handler:function(evt) {
				        		this.close();
				        		evt.stopEvent();
				        	}
				        },{
				        	text:'new windowlite',
				        	handler:function(evt){
				        		newWin();
				        		evt.stopEvent();
				        	}
				        }
				        ],
				       resizable:true
				   });
				   
				    
				    
				    
				    //大数据量
				    (function() {
					   	Ext.DomHelper.overwrite(mwindow.body,table);
					   	mwindow.show({
    				    	//x,y应该是窗口当前可见区域，不包括滚动区域
    				    	x:600,
    				    	y:400,
    				    	constrainToView:true
    				    });
					   	//不脱离视窗
					   	//mwindow.constrainToView();
					   	//手动阴影同步
					   	//mwindow.syncShadow();
					   	table=null;
					  }).defer(50);
				    
				    
				   	var events=['hide',
				    'beforehide', 'beforeclose', 'show',
				    'close', "resize", "ghost", "unghost"
				    , "maximize", "restore"];
				if(false)for(var i=0;i<events.length;i++) {
					
					(function(evt){mwindow.on(evt,function(){
						console.log("invoke "+evt);
					});})(events[i]);
				}
    }

	
	
  Ext.fly('action_a').on('click', newWin);

	Ext.get("skin").dom.value="css/aol/windowlite.css";
	
	function swapStyleSheet(cssId,url){
		var doc=document;
		var existing = doc.getElementById(cssId);
    if(existing){
        existing.parentNode.removeChild(existing);
    }
    
    var ss = doc.createElement("link");
    ss.setAttribute("rel", "stylesheet");
    ss.setAttribute("type", "text/css");
    ss.setAttribute("id", cssId);
    ss.setAttribute("href", url);
    doc.getElementsByTagName("head")[0].appendChild(ss);
	}
	Ext.get("skin").on("change",function(){
		swapStyleSheet("skinCss",this.getValue());
	});
   
   

       
});
//]]>

</script>

</head>
<body>

<button id='action_a'> 显示</button>

<div style="margin:20px;">
	选择皮肤：
	
	<select id="skin">
		
		<option value="css/aol/windowlite.css">aol</option>
		<option value="css/windowlite.css">extjs</option>
	</select>	
</div>	


<div style="position:relative;top:500px;top:200px;border:1px solid red;height:500px;" id="relativeDiv">
</div>

</body>
</html>